<template>
  <div class="yonghu">
    <el-card class="box-card">
      <!-- one------------------------------------------------------- -->
      <div slot="header" class="clearfix header">
        <span>用户类型</span>
        <el-button type="primary" round @click="createFn">创建</el-button>
      </div>
      <!-- -------------------------------------------------------------- -->

      <!-- two 搜索框-->
      <div class="search">
        <el-input
          placeholder="请输入用户名"
          v-model="val"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
          ></el-button>
        </el-input>
        <!-- ----------------------------------------------------------- -->

        <!-- three----------日期 -->
        <el-date-picker
          v-model="date"
          type="daterange"
          range-separator="至"
          start-placeholder="注册开始日期"
          end-placeholder="注册结束日期"
        >
        </el-date-picker>
      </div>

      <!-- four----------data 指的是表格的数据----------------------------->
      <el-table :data="tableData" style="width: 100%">
        <!-- tableData存放表格变量 -->
        <!-- 第一栏 -->
        <el-table-column prop="user_id" label="编号" width="60">
        </el-table-column>
        <!-- 第二栏 -->
        <el-table-column
          prop="role_name"
          label="所属角色"
          width="80"
        ></el-table-column>

        <!-- 第三栏 -->
        <el-table-column
          prop="username"
          label="用户名"
          width="80"
        ></el-table-column>

        <!-- 第四栏 -->
        <el-table-column
          prop="mobile_phone"
          label="手机号"
          width="80"
        ></el-table-column>

        <!-- 第五栏 -->
        <el-table-column prop="state" label="冻结" width="100">
          <template slot-scope="scope">
            <!--   明确：在使用elementui的时候 可以利用【作用域插槽 获取当前行数据】 -->
            <!--   语法：<template  slot-scope="scope"></template>-->
            <!--   scope.row代表的是后台返回的表格里这一行的数据 -->
            <!--   scope.row.键  可以获取当前行每一个列的值 -->
            <!-- 这里是给switch开关双向绑定state 后面两个是开关的颜色 -->
            <el-switch
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
        </el-table-column>

        <!-- 第六栏 -->
        <el-table-column
          prop="reg_time"
          label="日期"
          width="100"
        ></el-table-column>

        <!-- 第七栏 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="editFn(scope.row)"
              >分配角色
            </el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delFn(scope.row.user_id)"
            >
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="updataFn(scope.row)"
            >
              编辑手机号
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- ----------------------------------------------------------------------------- -->

      <!-- 编辑角色弹框 -->
      <el-dialog title="角色分配" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <!-- form存放表单数据，方便后期统一管理 -->
          <el-form-item label="当前账号">
            <el-tag type="info">{{ form.user_id }}</el-tag>
          </el-form-item>
          <el-form-item label="当前角色">
            <!-- user_id用户编号 -->
            <!-- role_id角色编号 -->
            <!-- role_name用户角色 -->
            <el-tag type="info">{{ form.role_name }}</el-tag>
          </el-form-item>
          <el-form-item label="选择角色">
            <el-select v-model="form.role_id" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.user_id"
                :label="item.role_name"
                :value="item.role_id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="选择角色" prop="role_name">
                        <el-select v-model="form.role_name" placeholder="选择用户">
                            <el-option v-for="item in options" :key="item.user_id" :label="item.role_name"
                                :value="item.role_name">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitEditFn">确 定</el-button>
        </div>
      </el-dialog>
      <!--  -->

      <!--  编辑修改手机号的弹框-->
      <el-dialog title="提示" :visible.sync="dialogVisible2" width="50%">
        <el-form :model="form">
          <el-form-item label="编辑手机号">
            <el-input
              v-model="form.mobile_phone"
              autocomplete="off"
              type="text"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="sumitFn">确 定</el-button>
      </el-dialog>
      <!-- -------------------------------- -->

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 30, 40]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagetotal"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import {
  getYonghuIndex,
  putYonghuIndex,
  deleteYonghuIndex,
  getJueseIndex,
  putYonghuenit
} from "@/api";
export default {
  //封装代码，方便后期调用
  created() {
    this.initData();
  },
  //请求角色管理的角色列表渲染页面的接口，将这个接口的内容放到下拉框options中
  mounted() {
    getJueseIndex().then(res => {
      // console.log(res)
      this.options = res.data;
    });
  },
  methods: {
    //封装方法
    initData() {
      getYonghuIndex({
        pagenum: this.pagenum,
        pagesize: this.pagesize,
        uname: this.val,
        start_time: this.start_time,
        end_time: this.end_time
      }).then(res => {
        // console.log(res)
        this.tableData = res.data.list;
        this.pagetotal = parseInt(res.data.total);
      });
    },

    //搜索功能
    search() {
      this.initData();
    },

    //点击分配弹框按钮
    editFn(rowrr) {
      this.dialogFormVisible = true;
      // 保存当前行数据
      this.form = rowrr;
    },
    //点击编辑弹框的确定按钮去触发异步请求
    submitEditFn() {
      //隐藏弹框
      this.dialogFormVisible = false;
      //异步请求
      putYonghuIndex({
        user_id: this.form.user_id,
        role_id: this.form.role_id
      }).then(res => {
        // console.log(res)
        if (res.meta.state == 200) {
          this.$message.success(res.meta.msg);
          this.initData();
        } else {
          this.$message.error(res.meta.msg);
        }
      });
    },

    //点击出现手机号弹框
    updataFn(roidw) {
      this.dialogVisible2 = true;
      this.form = roidw;
    },
    //点击手机号弹框的确定按钮去发送异步请求
    sumitFn() {
      this.dialogVisible2 = false;
      putYonghuenit({
        user_id: this.form.user_id,
        mobile: this.form.mobile_phone
      }).then(res => {
        // console.log(res);
        if (res.meta.state == 200) {
          this.$message.success("操作成功");
          this.initData();
        } else {
          this.$message.error(res.meta.msg);
        }
      });
    },

    //分页效果的实现
    handleSizeChange(val) {
      this.pagesize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      //1.修改当前页
      this.pagenum = val;
      //2.重新请求数据
      this.initData(); //不同页面对应的数据不一样
    },

    //删除
    delFn(iid) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteYonghuIndex({
            user_id: iid
          }).then(res => {
            // console.log(res)
            if (res.meta.state == 200) {
              this.$message.success("操作成功");
              this.initData(); /* 操作成功就重新请求列表接口去渲染数据 */
            } else {
              this.$message.error("操作失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    //创建按钮
    createFn() {
      this.$router.push({ path: "/users/create" });
    }
  },

  data() {
    return {
      //存放页面数据的变量
      tableData: [],
      //存放表单编辑数据的一个变量，当点击它的时候会将那一行的数据赋值给他
      form: {},

      //分页参数
      pagenum: 1,
      pagesize: 5,
      pagetotal: 0,

      //存放选择角色的变量
      options: [],
      //存放日期选择的变量
      date: [],

      //控制弹框是否出现
      dialogFormVisible: false,

      //控制书记好弹框是否出现
      dialogVisible2: false,

      val: ""
    };
  }
};
</script>

<style lang="scss" scoped>
.yonghu {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  //搜索
  .search {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .input-with-select {
    width: 300px;
  }
  .el-table .cell {
    display: flex;
  }
}
</style>
